<template>
		
		<div class="swiper tabs-swiper">
			<ol class="tabs swiper-wrapper">
				<li v-for="item in imgURL" :key="item.id" class="swiper-slide">
					<router-link to="/">
						<img :src="item.imgurl" >
						<p>{{item.title}}</p>
					</router-link>
				</li>
			</ol>
		</div>
	
</template>

<script>
	
	import { onMounted } from 'vue';
	
	//引入Swiper的动态组件
	import Swiper , {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper';
	
	// //3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	
	export default{
		name : 'Recommend',
		data(){
			return{
				imgURL:[
					{id:1,imgurl:'images/1.png',title:'景点导航'},
					{id:2,imgurl:'images/2.png',title:'景点导航'},
					{id:3,imgurl:'images/3.png',title:'景点导航'},
					{id:4,imgurl:'images/4.png',title:'景点导航'},
					{id:5,imgurl:'images/5.png',title:'景点导航'},
					{id:6,imgurl:'images/6.png',title:'景点导航'},
					{id:7,imgurl:'images/7.png',title:'景点导航'},
					{id:8,imgurl:'images/8.png',title:'景点导航'},
					{id:9,imgurl:'images/9.png',title:'景点导航'},
					{id:10,imgurl:'images/10.png',title:'景点导航'},
					
				],
			}
		},
		setup(){
			onMounted( ()=>{
				new Swiper( '.tabs-swiper' , {
					slidesPerView : 5,
				})
			})
		}
	}
	
	
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	
	.tabs{
		padding: 0.3rem 0;
		display: flex;
		align-items: center;
	}
	
	.tabs li{
		width: 20%;
		text-align: center;
	}
	
	.tabs li img{
		width: 0.8rem;
		height: 0.8rem;
		
	}
	.tabs li p{
		padding: 0.2rem 0;
	}
</style>
